<%--
  Created by IntelliJ IDEA.
  User: Htao
  Date: 2018/5/4
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <%--<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">--%>
    <script src="${pageContext.request.contextPath }/static/js/jquery-1.11.3.min.js">
    </script>

    <style type="text/css">

        html {
            background-color: aquamarine;
        }

        .login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width: 300px;
            height: 300px;
        }

        .login h1 {
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.96);
            letter-spacing: 1px;
            text-align: center;
        }

        input {
            width: 100%;
            margin-bottom: 10px;
            background: rgba(0, 0, 0, 0.3);
            border: none;
            outline: none;
            padding: 10px;
            font-size: 13px;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var usern;
            var passwd;
            $("#username").blur(function () {
                usern = $("#username").val();
                if (usern == '') {
                    document.getElementById("spans").innerHTML = "<h6>用户名不能为空！！！</h6>"

                }
            });
            $("#password").blur(function () {
                passwd = $("#password").val();
                if (passwd == '') {
                    $("#spans").innerHTML = "<h6>密码不能为空！！！</h6>"
                    $("#btnLogin").disabled = 'disabled';
                }else {
                    $("spans").disabled= 'disabled';
                }
            });

            $("#btnLogin").click(function () {

                if (usern == '' || passwd == '') {
                    document.getElementById("spans").innerHTML = "<h6>用户名或密码为空！！！</h6>"
                    return;
                } else {
                    /* var usern = $("#username").val();
                     var passwd = $("#password").val();
                     alert(usern + passwd);*/
                    $.post("${pageContext.request.contextPath }/user/login",
                        {
                            username: usern,
                            password: passwd
                        }, function (data, status) {
                            if (data.msg == "success") {
                                return "${pageContext.request.contextPath }/user/list"
                            }
                            else {
                                document.getElementById("spans").innerHTML = "<h6>用户名或密码错误！！！</h6>"
                            }
                        }
                    )
                }
            });

        });
    </script>

</head>
<body>
<div class="login">
    <h1>客户登录</h1>
    <form action="" method="post">
        <input type="text" name="username" id="username" placeholder="用户名"/>
        <input type="password" name="password" id="password" placeholder="密码"/>
        <span id="spans"></span>
        <input id="btnLogin" type="button" value="登录"/>
        <input id="btnRegister" type="button" value="注册"/>
    </form>
</div>


</body>
</html>
